import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText, } from '@ant-design/pro-components';
import { Alert, Button, Divider, Form, message, Radio } from 'antd';
import React, { useEffect, useState } from 'react';
import { history, useIntl, useModel } from 'umi';
import styles from './index.less';
import { getCurrentUserMenu, login } from '@/services/api/user';
import ReactCanvasNest from 'react-canvas-nest'
import Input from 'antd/lib/input/Input';
import TextArea from 'antd/lib/input/TextArea';

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC = () => {
  const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
  const [type, setType] = useState<string>('account');
  const { initialState, setInitialState } = useModel('@@initialState');
  const [form] = Form.useForm();
  const [imgData, setimgData] = useState({
    png: '',
    verificationcode: '',
  });
  const intl = useIntl();

  const fetchUserInfo = async (userInfo: any) => {



    console.log(userInfo);
    const userCurrentMenu: any = await getCurrentUserMenu({});
    console.log(userCurrentMenu);
    window.currentMenus = userCurrentMenu;
    let menusKeys = {}
    userCurrentMenu.data.map((e: any, i: number) => {
      menusKeys[e.menuKey] = e
    });
    window.currentMenus = menusKeys
    let hasMenus: any = [];
    let currentMenus = userCurrentMenu?.data;
    let buttonAuth = {};
    currentMenus.map((e: any, i: number) => {
      hasMenus.push(e.menuKey);
    });
    // });
    await new Promise<void>((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 300);
    })

    await setInitialState((s) => ({
      ...s,
      currentUser: userInfo,
      userMenusKeys: hasMenus,
      accessData: []
    }));
  };

  const handleSubmit = async (values: any) => {
    try {
      console.log(values);
      // 登录
      const msg: any = await login({
        ...values,
      });
      console.log(msg);
      if (msg?.data?.result_flag) {
        message.success('登录成功！', 1);
        await fetchUserInfo(msg.data?.data);
        debugger
        /** 此方法会跳转到 redirect 参数所在的位置 */
        history.push('/home');
        return;
      }
      console.log(msg);
      // 如果失败去设置用户错误信息
      setUserLoginState(msg);
    } catch (error) {
      // const defaultLoginFailureMessage = intl.formatMessage({
      //   id: 'pages.login.failure',
      //   defaultMessage: '登录失败，请重试！',
      // });
      // message.error(defaultLoginFailureMessage);
      // form.setFieldsValue({
      //   ['kaptcha']: '',
      // });
    }
  };
  const floatColor = '24,144,255'
  // useEffect(() => {
  //   form.setFieldValue('user_code', 'lianshenglu');
  //   form.setFieldValue('user_pwd', 'lianshenglu123!');
  //   handleSubmit(form.getFieldsValue())
  // }, [])
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  return (
    <div className={styles.container}>
      <div className={styles.logoPng} />
      <div className={styles.content}>

        <div>
          <div className={styles.loginTitle}>欢迎登录</div>
          <Form {...formItemLayout}>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="用户账号">
              <Input />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="用户密码">
              <Input type='password' />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="密码确认">
              <Input type='password' />
            </Form.Item>
            <Divider />
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="企业名称">
              <Input />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="详细地址">
              <Input />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="联系人">
              <Input />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="身份证号码">
              <Input />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="联系电话">
              <Input />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="电子邮箱">
              <Input />
            </Form.Item>
            <Divider />
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="计费类型">
              <Radio.Group >
                <Radio value={1}>按次数计费</Radio>
                <Radio value={2}>年度套餐计费</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="服务协议">
              <TextArea></TextArea>
            </Form.Item>
            <Form.Item rules={[{ required: true, message: '请输入' }]} label="保密协议">
              <TextArea></TextArea>
            </Form.Item>

          </Form>
          <div style={{ textAlign: 'center' }}>
            <Button style={{ marginRight: '10px' }}>取消</Button>
            <Button type='primary'>提交</Button>
          </div>
        </div>
      </div>
      {/* <Footer /> */}
    </div>
  );
};

export default Login;
